<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONP</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <script>
        function callback(data) {
            console.log(data)
        }
    </script>
    <!-- <script src="http://localhost:8888"></script> -->
    <img src="https://p26-passport.byteacctimg.com/img/mosaic-legacy/3795/3033762272~300x300.image" alt="">
    <script>
        function jsonp(url, data = {}, callback = 'callback', cb) {
            // console.log(url, data, callback);
            let dataStr = url.indexOf('?') === -1 ? '?' : '&';
            for (let key in data) {
                dataStr += `${key}=${data[key]}&`
            }
            // with padding 
            dataStr += `callback=${callback}`
            let scriptSrc = url + dataStr;
            // console.log(scriptSrc);
            let oScript = document.createElement('script');
            oScript.src = scriptSrc
            document.body.appendChild(oScript);
            window[callback] = (data) => {
                // 完成跨域请求， 做接下来的业务
                // console.log(data);
                cb(data)
            }
        }


        jsonp('http://localhost:8888/recommend?a=1', {
            page: 1,
            cate: 'recommend'
        }, 'recommendCallback', (data) => {
            console.log(data, 'to be contine');
        })
//     JSONP
// 1. script src DOM 动态构建
// 2. callback  动态指定 
// Ajax  fetch  跨域  同源策略 
// 能发送嘛？ CORS 
// 服务器能接受嘛？
// 数据到达后能相信嘛？

// fetch('http://localhost:8888/')
//     .then(data => data.json())
//     .then(data => {
//         console.log('---------')
//     })
    </script>
</body>

</html>